import {move} from "../../libs/common.js";
import $ from "jquery";

/**
 * 用于轮播图基础功能
 * @function toPrev     滚动到 上一页  
 * @function toNext     滚动到 下一页 
 * @function toIndex    滚动到 选择的那页 
 * @function animate    移动动画 （调用common中的move函数）
 * @function getCurIndex 返回当前下标
 */
/**
 * target      目标元素（需要运动的元素 ul) 
 * pageCnt     页数（包括了克隆第一个的数量）
 * pageWidth   每页宽度
 *
 */

class WheelPlantBase{
    constructor(param){
        this.target         = param.target;
        this.m_pageCnt      = param.pageCnt;
        this.m_pageWidth    = param.pageWidth;
        this.m_index        = 0;
    }
    toNext(){
        if(this.m_index >= this.m_pageCnt - 1){
            this.target.css("left",0)
            this.m_index = 1;
        }
        else{
            this.m_index++;
        }
        this.animate();
    }
    toPrev(){
        if(this.m_index <= 0){
            this.target.css({
                "left": -this.m_pageWidth * (this.m_pageCnt - 1)
            })
            this.m_index = this.m_pageCnt - 2;
        }
        else{
            this.m_index--;
        }
        this.animate();
    }
    toIndex(index){
        this.m_index = index;
        this.animate();
    }
    animate(){
        move(this.target[0], {
            left: -this.m_pageWidth * this.m_index,
        });
    }
    getCurIndex(){
        return this.m_index;
    }
}

/**
 * 用于轮播图上的显示和事件处理
 * 绑定左右按钮事件
 * 对切页（即小圆点）绑定事件和显示
 * 自动播放
 * @function init           初始化 （获得需要的元素和数据）
 * @function bindEvent      绑定事件 
 * @function startAutoPlay  设置定时器，进行自动播放
 * @function delayStartAutoPlay 点击小圆点切页后，延迟一段时间在自动播放
 * @function showIndicators 根据下标进行圆点显示高亮效果
 * @function prevEvent      点击上一页事件
 * @function nextEvent      点击下一页事件
 */
/**
 * @var param   参数
 * model        基础功能实例对象
 * indsList     切页集合（圆点集合）
 * indsName     圆点高亮的className
 * isAuto      是否自动播放
 * prevBtn     上一页按钮
 * nextBtn     下一页按钮
 * target      目标元素（需要运动的元素 ul) 
 * pageCnt     页数（包括了克隆第一个的数量）
 * pageWidth   每页宽度
 * delayTime   频率（定时时间）
 */
class WheelPlant extends WheelPlantBase {
    constructor(param){
        super(param);
        this.init.apply(this,arguments);
    }
    init(param){
        this.m_timer    = null;                     // 定时器
        this.m_outTimer = null;                     // 延时器
        this.m_indsList = param.indsList || [];      
        this.m_indsName = param.indsName || ""; 
        this.m_isAuto   = param.isAuto;             
        this.m_prevBtn  = param.prevBtn;            
        this.m_nextBtn  = param.nextBtn;    
        this.m_delayTime = param.delayTime || 2000;

        this.bindEvent();
        this.showIndicators(0);
        if(this.m_isAuto)
            this.startAutoPlay();
    }
    bindEvent(){
        let _this = this;
        this.m_indsList.length > 0 && this.m_indsList.mouseover(function(){
                clearInterval(_this.m_timer);
                _this.showIndicators($(this).index());
                _this.toIndex($(this).index());
                if(_this.m_isAuto)
                    _this.delayStartAutoPlay();
            });
        this.m_prevBtn && this.m_prevBtn.click($.proxy(this.prevEvent,this));
        this.m_nextBtn && this.m_nextBtn.click($.proxy(this.nextEvent,this));
    }
    startAutoPlay(){
        clearInterval(this.m_timer);
        this.m_timer = setInterval(() => {
            this.toNext();
            let index = this.getCurIndex();
            this.showIndicators(index);
        }, this.m_delayTime);
    }
    delayStartAutoPlay(){
        clearInterval(this.m_outTimer);
        this.m_outTimer = setTimeout(this.startAutoPlay.bind(this), this.m_delayTime);
    }
    showIndicators(index){
        let arr = this.m_indsList;
        if(arr.length <= 0) return false;
        let str = this.m_indsName;
        if(index == arr.length){
            index = 0;
        }
        arr.addClass(function(){
            if(index == $(this).index())
               return str;
        })
        .removeClass(function(){
            if(index !== $(this).index())
               return str;
        });
    }
    prevEvent(){
        clearInterval(this.m_timer);
        this.toPrev();
        let index = this.getCurIndex();
            this.showIndicators(index);
        if(this.m_isAuto)
            this.delayStartAutoPlay();
    }
    nextEvent(){
        clearInterval(this.m_timer);
        this.toNext();
        let index = this.getCurIndex();
            this.showIndicators(index);
        if(this.m_isAuto)
            this.delayStartAutoPlay();
    }
}

module.exports = WheelPlant;